<template>
  <div class="yaoProduct">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <div class="main">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img :src="goodInfo.bigPic" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 价格 -->
      <van-cell :title="'￥' + goodInfo.price" class="priceCell" :border="false">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="star-o" class="star-o" />
        </template>
      </van-cell>
      <van-cell :title="goodInfo.goodsName" class="titleCell" :border="false">
        <template #right-icon>
          <van-stepper v-model="value" min="1" max="9" async-change @change="onChange" />
        </template>
      </van-cell>
      <van-cell :title="goodInfo.brief" class="choosedCell" :border="false"> </van-cell>

      <!-- 加入购物车 -->
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      goodInfo: this.$store.state.cart.goodInfo,
      value: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onChange(value) {
      Toast.loading({ forbidClick: true });
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        Toast.clear();
        // 注意此时修改 value 后会再次触发 change 事件
        this.value = value;
      }, 500);
    },
  },
  mounted() {
    console.log(this.goodInfo);
  },
};
</script>
<style lang="scss">
.yaoProduct {
  .my-swipe {
    img {
      width: 5.6rem;
      margin: 0 auto;
    }
  }
  .priceCell {
    align-items: baseline;
    span {
      color: red;
      font-size: 0.6rem;
    }
    i {
      font-size: 0.6rem;
    }
  }
  .titleCell {
    span {
      color: black;
      font-size: 0.3rem;
    }
  }
  .choosedCell {
    color: #99a6c4;
  }
}
</style>
